<template>
  <div class="hello">
    <div>{{ this.$store.state.count }}</div>
    <div><el-button @click="add()" size="mini">addNum</el-button></div>
    <div>sumCount={{ this.$store.getters.getSumVoteCount }}</div>
    <div>
      <el-button type="success" @click="getSumVoteCount('java')" size="mini"
        >java</el-button
      >({{ this.$store.state.java.count }})
      <el-button type="success" @click="getSumVoteCount('web')" size="mini"
        >web</el-button
      >({{ this.$store.state.web.count }})
      <el-button type="success" @click="getSumVoteCount('ui')" size="mini"
        >ui</el-button
      >({{ this.$store.state.ui.count }})
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {}
  },
  methods: {
    add() {
      //修改state中的数据，唯独调用mutations中的函数，add函数名，20传递的参数
      this.$store.commit('add', 20)
    },
    getSumVoteCount(name) {
      this.$store.commit('vote', name)
    }
  },
  mounted() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
